<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-position="right" label-width="200px" class="demo-ruleForm" size="large" >

      <el-form-item label="UserID"  >
        <el-input v-model="ruleForm.id" readonly style="width:300px"></el-input>
      </el-form-item>
<!--      <el-form-item label="Password" prop="password">-->
<!--        <el-input v-model="ruleForm.password"style="width:300px"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="Email" prop="email">
        <el-input v-model="ruleForm.email"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="FirstName" prop="firstName">
        <el-input v-model="ruleForm.firstName"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="LastName" prop="lastName">
        <el-input v-model="ruleForm.lastName"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Status" prop="status">
        <el-input v-model="ruleForm.status"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Address1" prop="address1">
        <el-input v-model="ruleForm.address1"style="width:300px"></el-input>
      </el-form-item>
<!--      <el-form-item label="Address2" prop="address2">-->
<!--      <el-input v-model="ruleForm.address2"style="width:300px"></el-input>-->
<!--    </el-form-item>-->
      <el-form-item label="City" prop="city">
      <el-input v-model="ruleForm.city"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="State" prop="state">
        <el-input v-model="ruleForm.state"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Zip" prop="zip">
        <el-input v-model="ruleForm.zip"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Country" prop="country">
      <el-input v-model="ruleForm.country"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="Phone" prop="phone">
        <el-input v-model="ruleForm.phone"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="favouriteCategoryId" prop="favouriteCategoryId">
        <el-input v-model="ruleForm.favouriteCategoryId"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="languagePreference" prop="languagePreference">
        <el-input v-model="ruleForm.languagePreference"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="listOption" prop="listOption">
        <el-input v-model="ruleForm.listOption"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="bannerOption" prop="bannerOption">
        <el-input v-model="ruleForm.bannerOption"style="width:300px"></el-input>
      </el-form-item>






      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id:this.$route.query.id,
        password:this.$route.query.password,
        email:this.$route.query.email,
        firstName:this.$route.query.firstName,
        lastName:this.$route.query. lastName,
        status:this.$route.query.status,
        address1:this.$route.query.address1,
        // address2:this.$route.query.address2,
        city:this.$route.query.city,
        state:this.$route.query.state,
        zip:this.$route.query.zip,
        country:this.$route.query.country,
        phone:this.$route.query.phone,
        favouriteCategoryId:this.$route.query.favouriteCategoryId,
        languagePreference:this.$route.query.languagePreference,
        listOption:this.$route.query.listOption,
        bannerOption:this.$route.query.bannerOption,

      },
      rules: {
        email: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        firstName: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        lastName: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        address1: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        // address2: [
        //   { required: true, message: '请输入正确的内容', trigger: 'blur' },
        // ],
        city: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        state: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        zip: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        country: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        favouriteCategoryId: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        languagePreference: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        listOption: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        bannerOption: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],


      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(_this.ruleForm)
          //此处需要保存添加product的全部信息
          axios({
            method:"PATCH",
            url:'http://115.29.176.82:8081/manager/api/account',
            data:{
              id:_this.ruleForm.id,
              password:_this.ruleForm.password,
              email:_this.ruleForm.email,
              firstName:_this.ruleForm.firstName,
              lastName:_this.ruleForm. lastName,
              status:_this.ruleForm.status,
              address1:_this.ruleForm.address1,
              // address2:_this.ruleForm.address2,
              city:_this.ruleForm.city,
              state:_this.ruleForm.state,
              zip:_this.ruleForm.zip,
              country:_this.ruleForm.country,
              phone:_this.ruleForm.phone,
              favouriteCategoryId:_this.ruleForm.favouriteCategoryId,
              languagePreference:_this.ruleForm.languagePreference,
              listOption:_this.ruleForm.listOption,
              bannerOption:_this.ruleForm.bannerOption,

            }
          }).then(function (resp){
            console.log(resp)
            if(resp.status===200)
              alert('修改成功，请继续您的操作')
          })
        } else {
          alert('ERROR！请修改您的数据后再次提交')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },


}
</script>